<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员登录 - 心理咨询系统</title>
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/bootstrap-icons.css') }}" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .login-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            padding: 2.5rem;
            width: 100%;
            max-width: 420px;
            margin: 1rem;
        }
        .login-header {
            text-align: center;
            margin-bottom: 2.5rem;
        }
        .login-header h2 {
            color: #333;
            margin-bottom: 0.5rem;
            font-weight: 600;
        }
        .login-header p {
            color: #666;
            margin: 0;
            font-size: 0.95rem;
        }
        .form-label {
            color: #333;
            font-weight: 500;
            margin-bottom: 0.5rem;
        }
        .mb-3 {
            margin-bottom: 1.5rem !important;
        }
        .form-check {
            margin-bottom: 1.5rem !important;
        }
        .form-check-label {
            color: #666;
            font-size: 0.95rem;
        }
        .form-control {
            border: 1px solid #ddd;
            padding: 0.75rem 1rem;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }
        .form-control:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }
        .input-group {
            margin-bottom: 1rem;
        }
        .input-group .form-control {
            border-left: none;
            margin-bottom: 0;
        }
        .input-group .form-control:focus {
            border-left: none;
        }
        .input-group-text {
            background-color: #f8f9fa;
            border: 1px solid #ddd;
            border-right: none;
            color: #667eea;
            font-size: 1rem;
        }
        .input-group:first-child .input-group-text {
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }
        .input-group:first-child .form-control {
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        .input-group .form-control {
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        .input-group .input-group-text {
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }
        .btn-login {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 10px;
            padding: 0.875rem 1rem;
            width: 100%;
            color: white;
            font-weight: 500;
            font-size: 1rem;
            transition: all 0.3s ease;
            margin-bottom: 1rem;
        }
        .btn-login:hover {
            transform: translateY(-2px);
            color: white;
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
        }
        .btn-login:disabled {
            transform: none;
            opacity: 0.7;
        }
        .back-link {
            text-align: center;
            margin-top: 1.5rem;
            padding-top: 1rem;
            border-top: 1px solid #eee;
        }
        .back-link a {
            color: #667eea;
            text-decoration: none;
            font-size: 0.95rem;
            transition: color 0.3s ease;
        }
        .back-link a:hover {
            color: #764ba2;
            text-decoration: none;
        }
        .alert {
            border-radius: 10px;
            margin-bottom: 1rem;
            border: none;
        }
        
        /* 响应式设计 */
        @media (max-width: 576px) {
            .login-card {
                margin: 0.5rem;
                padding: 2rem 1.5rem;
                max-width: 100%;
            }
            .login-header h2 {
                font-size: 1.5rem;
            }
            .login-header p {
                font-size: 0.9rem;
            }
        }
        
        @media (max-width: 400px) {
            .login-card {
                padding: 1.5rem 1rem;
            }
            .btn-login {
                padding: 0.75rem;
                font-size: 0.95rem;
            }
        }
        
        /* 确保页面在小屏幕上也能正常显示 */
        .container-fluid {
            padding: 0;
        }
        
        /* 改进焦点状态 */
        .form-control:focus,
        .input-group .form-control:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }
        
        /* 改进复选框样式 */
        .form-check-input:checked {
            background-color: #667eea;
            border-color: #667eea;
        }
        
        .form-check-input:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }
    </style>
</head>
<body>
    <div class="login-card">
        <div class="login-header">
            <h2><i class="bi bi-shield-lock me-2"></i>管理员登录</h2>
            <p>心理咨询系统管理后台</p>
        </div>

        <div id="alertContainer"></div>

        <form id="loginForm">
            <div class="mb-3">
                <label for="username" class="form-label">用户名</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="bi bi-person"></i></span>
                    <input type="text" class="form-control" id="username" name="username" required>
                </div>
            </div>

            <div class="mb-3">
                <label for="password" class="form-label">密码</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="bi bi-lock"></i></span>
                    <input type="password" class="form-control" id="password" name="password" required>
                </div>
            </div>

            <div class="mb-3 form-check">
                <input type="checkbox" class="form-check-input" id="rememberMe">
                <label class="form-check-label" for="rememberMe">
                    记住我
                </label>
            </div>

            <button type="submit" class="btn btn-login">
                <i class="bi bi-box-arrow-in-right me-2"></i>登录
            </button>
        </form>

        <div class="back-link">
            <a href="{{ url_for('main.index') }}">
                <i class="bi bi-arrow-left me-1"></i>返回首页
            </a>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
    <script>
        document.getElementById('loginForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const rememberMe = document.getElementById('rememberMe').checked;
            
            if (!username || !password) {
                showAlert('请输入用户名和密码', 'danger');
                return;
            }
            
            // 显示加载状态
            const submitBtn = e.target.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;
            submitBtn.innerHTML = '<i class="bi bi-hourglass-split me-2"></i>登录中...';
            submitBtn.disabled = true;
            
            // 发送登录请求
            fetch('/api/admin/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    username: username,
                    password: password,
                    remember_me: rememberMe
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // 保存token
                    localStorage.setItem('adminToken', data.data.access_token);
                    localStorage.setItem('adminInfo', JSON.stringify(data.data.admin));
                    
                    showAlert('登录成功，正在跳转...', 'success');
                    
                    // 跳转到管理后台
                    setTimeout(() => {
                        window.location.href = '/admin-dashboard';
                    }, 1000);
                } else {
                    showAlert(data.message || '登录失败', 'danger');
                }
            })
            .catch(error => {
                console.error('登录请求失败:', error);
                showAlert('网络错误，请稍后重试', 'danger');
            })
            .finally(() => {
                // 恢复按钮状态
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
            });
        });
        
        function showAlert(message, type) {
            const alertContainer = document.getElementById('alertContainer');
            const alert = document.createElement('div');
            alert.className = `alert alert-${type} alert-dismissible fade show`;
            alert.innerHTML = `
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            alertContainer.innerHTML = '';
            alertContainer.appendChild(alert);
            
            // 自动隐藏成功消息
            if (type === 'success') {
                setTimeout(() => {
                    alert.remove();
                }, 3000);
            }
        }
        
        // 检查是否已经登录
        const adminToken = localStorage.getItem('adminToken');
        if (adminToken) {
            // 验证token是否有效
            fetch('/api/admin/verify', {
                headers: {
                    'Authorization': 'Bearer ' + adminToken
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // token有效，直接跳转到管理后台
                    window.location.href = '/admin-dashboard';
                }
            })
            .catch(error => {
                // token无效，清除本地存储
                localStorage.removeItem('adminToken');
                localStorage.removeItem('adminInfo');
            });
        }
    </script>
</body>
</html>